<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .first{
      width: 200px;
      height: 200px;
      background:linear-gradient(-45deg,red 33.333%,green 33.333%,green 66.666%,blue 66.666%,blue);
    }

    .second{
      margin-top: 100px;
      width: 200px;
      height: 200px;
      background:linear-gradient(red,orange,yellow,green,blue  ,purple);
    }

    .third{
      margin-top: 100px;
      width: 200px;
      height: 200px;
      /* background:radial-gradient(形状 大小  方向 ,  颜色1，颜色2。。。) */
      background:radial-gradient(circle closest-side at 60% 55% ,red 15%,orange 15%,orange 30%,yellow 30%,yellow 45%,green 45% ,  green 60%,blue 60%, blue 75%  ,purple 75%)
    }
  </style>
</head>
<body>
<!-- 线性 -->
  <div class="first">

  </div>

  <div class="second">

  </div>

  <!-- 径向 -->
  <div class="third">

  </div>


</body>
</html>